
<template>
  <!-- vue3的模版部分和vue2相比 
  不要有一个根元素 -->
    <div id="nav">
      <router-link to="/home">ref和setup的使用</router-link>|
      <router-link to="/cart">reactive的使用</router-link>|
      <router-link to="/cate">toRefs方法和生命周期</router-link>|
      <router-link to="/todolist">todolist练习和vue3的hooks函数</router-link>|
       <router-link to="/fly">编程式路由和组件传值和watchEffect
       </router-link>|
         <router-link to="/tang">setup语法糖</router-link>|
        <router-link to="/myref">ref获取组件和defineExpose</router-link>|
         <router-link to="/mycom">nextTick,$parent,路由钩子，attrs</router-link>
    </div>
    <div>
       <router-view></router-view>
    </div>
    <div class="mytab">
      <tabbar-com></tabbar-com>
    </div>
</template>

<script setup>  
  import tabbarCom from './components/tabbarCom.vue'

</script>

<style scoped>
   .router-link-active{
    color:red;
    font-size: 20px;
   }
</style>
